<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../../vue.js"></script>
    <style>
        .style {
          font-style: italic;
        }
        .red {
          background: red;
        }
        .yellow {
          color: yellow;
        }
        .bold {
          font-weight: bold;
        }
        .bd {
          border: 1px solid #000;
        }
        .active {
          box-shadow: 3px 3px 3px 3px pink;
        }
      </style>
 </head>
<body>
<div id="app">
     <!-- 
        什么时候使用动态类？当类名是通过数据来控制是否添加的时候，才会使用动态类
        情况1：当动态类只有一个类的时候，我们可以直接使用三元等表达式，返回一个字符串即可
       -->
       <div class="style" :class="isMove?'active':''">案例1</div>
       <div class="style" :class="className">案例2</div>
 
       <!-- 
         情况2：当动态类的类有一个或者多个的时候(固定个数)，我们可以给动态类设置一个对象，每一个类名都是对象的key，值是一个布尔值代表是否开启当前的类
        -->
       <div class="style" :class="{active:isActive,bold:isMove,bd:isHover}">
         案例3
       </div>
       <div class="style" :class="{active:isMove}">案例4</div>
 
       <!-- 
         情况3：当动态类的类有一个或多个，不确定数量的时候，可以使用数组，只要在数组中的类都会添加到DOM上，不能开启和关闭，但是可以操作数组来控制类
        -->
       <div class="style" :class="classArr">案例5</div>
</div>
<script>
    const vm = new Vue({
        el:"#app",
        data(){
            return{
                isMove: true,
                isHover: true,
                isActive: true,
                className: "active",
                classArr: ["active", "bd", "bold"],

            }
        }
    })
</script>
</body>
</html>